<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">押金充值记录</block>
		</cu-custom>
		<view class="">
			<view class="margin bg-white">
				<view class="text-lg solid-bottom padding">押金充值记录</view>
				<view class="flex flex-direction padding">
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-timefill">{{depositRecord.ct}}</text>
						<text class="cuIcon-rechargefill text-red">{{formatAmount(depositRecord.amount / 100 )}}</text>
					</view>
				</view>
			</view>
			<view v-if="paymentRecord.payFlg" class="flex justify-between margin padding-tb bg-white">
				<text class="bg-white cu-btn margin-left" v-if="clientDeposit.statu === 'PAY'">
					已充值
				</text>
				<text class="margin-left" v-if="clientDeposit.statu === 'REQ'">
					已申请退款
				</text>
				<text class="margin-left" v-if="clientDeposit.statu === 'REJ'">
					已驳回退款
				</text>
				<text class="margin-left" v-if="clientDeposit.statu === 'BCK'">
					已退款
				</text>
				<text class="margin-left" v-if="clientDeposit.statu === 'APP'">
					押金已扣除
				</text>
				<button v-if="clientDeposit.statu === 'PAY'" 
					@tap="depositBack" 
					class="cu-btn bg-red margin-right">申请退款</button>
			</view>
			<view class="margin bg-white">
				<view class="text-lg solid-bottom padding">押金退还申请记录</view>
				<view v-for="(dbr,dndex) in depositBackRequests" class="">
					<view class="margin-sm padding-sm solid">
						<view class="padding-sm">申请时间：{{dbr.ct}}</view>
						<view class="padding-sm">申请原因：{{dbr.reason}}</view>
						<view class="padding-sm">
							<text v-if="dbr.statu == 'REQ'">
								已申请
							</text>
							<text v-else-if="dbr.statu == 'REJ'">已驳回</text>
							<text v-else-if="dbr.statu == 'BCK'">已退还</text>
							<text v-else-if="dbr.statu == 'CLO'">已关闭</text>
							<text v-else-if="dbr.statu == 'RUN'">退款中</text>
							<text v-else-if="dbr.statu == 'EXC'">退款异常</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="paymentRecord.payFlg" class="margin bg-white">
				<view class="text-lg solid-bottom padding">支付记录</view>
				<view class="flex flex-direction padding">
					<view class="flex  margin-tb-sm flex-direction">
						<text class="cuIcon-timefill">{{paymentRecord.ct}}</text>
						<text class="cuIcon-weixin">{{paymentRecord.originalCode}}</text>
					</view>
				</view>
			</view>
			<view v-else class="flex flex-direction margin">
				<button @tap="depositExPay" class="cu-btn bg-blue">支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option){
			this.state = this.common.getState();
			this.depositRecord.depositId = option.depositId;
			this.init();
		},
		onShow: function() {
			this.state = this.common.getState();
		},
		data: function() {
			return {
				state: {},
				depositRecord: {
					depositId: 0
				},
				paymentRecord: {
				},
				clientDeposit: {
					
				},
				depositBackRequests: []
			};
		},
		methods: {
			formatAmount: function(amount) {
				return this.common.parseMoney(amount);
			},
			loadDepositBackRequest: function() {
				this.http.get({
					url: "/client/deposit-back-request/list",
					param: {
						depositId: this.depositRecord.depositId
					}
				}).then(res => {
					console.log(res);
					this.depositBackRequests = res;
				});
			},
			init: function() {
				let self = this;
				this.http.get({
					url: "/client/deposit-record/"+self.depositRecord.depositId+"/info"
				}).then(function(res) {
					self.clientDeposit = res.client_deposit;
					self.depositRecord = res.deposit_record;
					self.paymentRecord = res.payment_record;
				});
				this.loadDepositBackRequest();
			},
			depositBack: function() {
				
				uni.showModal({
					title: '申请',
					content: '即将发起押金返还申请，确认吗？',
					success: res => {
						if (res.confirm) {
							
							this.http.post({
								url: "/client/deposit-back-request/info",
								param: {
									reason: "退款申请",
									depositId: this.depositRecord.depositId,
								}
							}).then(res => {
								this.message.info("申请成功");
								this.init();
							});
							
						} else if (res.cancel) {}
				
					}
				});
				
				
				
				
				
			},
			depositExPay: function() {
				
				this.http.post({
					url: "/client/deposit-record/"+this.depositRecord.depositId+"/info",
					param: {
						clientId: this.state.autor.store_client.clientId,
						storeId: this.state.autor.store_client.storeId,
						openId: this.state.autor.store_client.openId,
					}
				}).then(data => {
					
					this.pay.exePay(data.tokenJSAPI).then(res => {
						this.init();
					});
					
				});
			}
		}
	}
</script>

<style>
</style>
